<template>
  <Dialog
    :showDialog="showDiaLog"
    headerName="添加"
    diaWidth="72"
    diaTop="3"
    footerPadding="0 340"
  >
    <template #content>
      <div class="dia-content">
        <el-form :model="diaForm" label-width="100px" :inline="true">
          <el-row>
            <el-col :span="7">
              <el-form-item label="楼宇选择">
                <el-select
                  clearbaler
                  class="clear-bgc"
                  v-model="value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-select
                clearbaler
                class="clear-bgc"
                v-model="value"
                placeholder="请选择楼层"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                clearbaler
                class="clear-bgc mar-left"
                v-model="value"
                placeholder="请选择房间"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <div class="search-btn-wrap">
                <el-button :icon="Search" type="primary" @click="getList"
                  >查询</el-button
                >

                <el-checkbox v-model="checked1" label="全选" size="large" />
              </div>
            </el-col>
          </el-row>
        </el-form>
        <ul class="content-wrap-item table-data">
          <li v-for="item in 10">
            <div class="one-line">
              <el-checkbox
                v-model="checked1"
                label="女生宿舍楼1-203"
                size="large"
              />
              <div class="status">离线</div>
            </div>
            <div class="air">
              <img src="../images/dengpao.png" alt="" />
            </div>
            <div class="light-wrap">
              <span>调节亮度</span>
              <el-button>详情</el-button>
            </div>
            <div class="silder">
              <el-slider v-model="params.value1" />
            </div>
            <div class="switch table-data">
              <span>单控开关</span>
              <el-switch v-model="diaParams.value2" />
            </div>
          </li>
        </ul>
        <div class="dia-pagination pagination">
          <Pagination
            v-model:currentPage="diaParams.currentPage"
            :total="diaTotal"
            v-model:page-size="diaParams.pageSize"
          />
        </div>
      </div>
    </template>
  </Dialog>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
let diaForm = reactive({});
let diaParams = reactive({});
let value = ref("");
let params = reactive({ value1: "" });
let diaTotal = ref(1);
let checked1 = ref(false);
let props = defineProps(["showDiaLog"]);
console.log(props.showDiaLog);

let getList = () => {};
</script>
<style scoped lang="scss">
.dia-content {
  padding-left: 30px;
  padding-right: 20px;
  padding-top: 10px;
  .dia-pagination {
    margin-top: 16px;
    margin-bottom: 85px;
    :deep(.el-input.el-input--default.el-input--suffix) {
      width: 120px;
    }
  }
  .content-wrap-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    :deep(.el-checkbox__inner) {
      width: 18px;
      height: 18px;
      background: #044483;
      border: 1px solid #61c8ff;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
      width: 6px;
      height: 10px;
    }
    :deep(.el-checkbox__label) {
      color: #fff;
    }
    li {
      width: 242px;
      height: 259px;
      background: #022553;
      border: 1px solid #225986;
      margin-top: 20px;
      .one-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px 0 10px;
        :deep(.el-checkbox__label) {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
        }
        .status {
          text-align: center;
          background: url("../images/lixian.png") no-repeat;
          background-size: 100% 100%;
          width: 46px;
          height: 24px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #fffefe;
          line-height: 24px;
        }
      }
      .air {
        text-align: center;
        img {
          width: 63px;
          height: 62px;
          margin-top: 18px;
        }
      }
      .silder {
        padding: 8px 16px 2px 14px;
        :deep(.el-slider__button) {
          width: 14px;
          height: 14px;
        }
      }
      .light-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 20px 0 14px;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #fefefe;
        }
        :deep(.el-button) {
          width: 67px;
          height: 27px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          border-radius: 0px;

          svg {
            width: 50px !important;
            height: 17px !important;
          }
        }
      }
      .switch {
        padding: 0 17px 0 15px;
      }

      .switch {
        display: flex;
        justify-content: space-between;
        /* margin-top: 20px; */
        align-items: center;
        span {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #fefefe;
        }
      }
    }
    .el-switch {
      .el-switch__core {
        width: 54px;
        height: 28px;
        background: #044483;
        border-radius: 14px;
        border: 1px solid #61c8ff;
      }
      .el-switch__action {
        width: 21px;
        height: 21px;
        background: #61c8ff;
        border-radius: 50%;
        margin-left: 2px;
      }
    }
    .el-switch.is-checked {
      .el-switch__core {
        width: 53px;
        height: 28px;
        background: #e5e5e5;
        border-radius: 14px;
        border: none;
      }
      .el-switch__action {
        position: absolute;
        width: 21px;
        height: 21px;
        background: #686868;
        border-radius: 50%;
        margin-left: -7px;
      }
    }
  }
  :deep(.el-col.el-col-7) {
    margin-right: -20px;
  }
  :deep(.el-row) {
    margin-top: 10px;
  }
  .mar-left {
    margin-left: 8px;
  }
  :deep(.el-form-item__content) {
    margin-left: 0px;
  }
  .search-btn-wrap {
    display: flex;
    align-items: center;
    margin-left: 20px;
    padding-top: 0px;
    margin-top: -2px;
    :deep(.el-button) {
      margin-right: 40px;
      width: 84px;
      height: 35px;
      background: rgba(27, 168, 255, 0.35);
      border: 1px solid #61c8ff;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #fefefe;
      border-radius: 0px;

      svg {
        width: 50px !important;
        height: 17px !important;
      }
    }
    :deep(.el-checkbox__label) {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
    }

    :deep(.el-checkbox__inner) {
      width: 18px;
      height: 18px;
      background: #044483;
      border: 1px solid #61c8ff;
    }
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
      width: 6px;
      height: 10px;
    }
  }

  .warning-detail :deep(.el-textarea__inner) {
    background-color: #235b87;
  }
  .update-bgc :deep(.el-input__wrapper) {
    background-color: transparent;
  }
}
</style>
